<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="./lib/mui/mui.min.css">
<link rel="stylesheet" href="./css/land.css">
<style type="text/css">
.lay-wrapper{display:table;position:absolute;top:0;left:0;right:0;height:100%;z-index: 1000;width:100%;}
.lay-wrapper-inner{display:table-cell;vertical-align: middle;text-align: center;}
</style>
</head>
<body>
<div class="mui-content">
    <div class="lay-wrapper">
        <div class="lay-wrapper-inner">
            <div class="header-title">
                <div class="title-main"><p><img src="img/main_toptitle.png"></p></div>
                <div class="title-small"><p><img src="img/main_futitle.png"></p></div>
            </div>
            <div class="wrapper">
                <div class="w-col-1" style="background-image:url(img/1_gh.jpg);"> 
                    <div class="inner-bar-title ell">规划道路</div>
                </div><div class="w-col-2" style="background-image:url(img/1_yg.jpg);">
                    <div class="inner-bar-title ell">遥感影像</div>
                </div>
            </div>
            <div class="wrapper">
                <div class="w-col-1" style="background-image:url(img/1_ty.jpg);">
                    <div class="inner-bar-title ell">统一规划管理用图</div>
                </div><div class="w-col-1" style="background-image:url(img/1_td.jpg);">
                    <div class="inner-bar-title ell">土地利用总体规划</div>
                </div><div class="w-col-1" style="background-image:url(img/1_zw.jpg);">
                    <div class="inner-bar-title ell">政务电子地图</div>
                </div>
            </div>
            <div class="wrapper wrapper-bttom">
                <p>武汉市国土资源和规划信息中心 V1.0</p>
            </div>
        </div>
    </div>
</div>
<script src="./lib/mui/mui.min.js"></script>
<script type="text/javascript">
    mui('.wrapper').on('tap','.w-col-1,.w-col-2',function(){
        mui.openWindow({
            url:"./slideNav.html",
            id:"slideNav",
            styles:{
                top:0,
                bottom:0,
                width:'100%',
                height:'100%'
            },
            show:{
                autoShow:true,//页面loaded事件发生后自动显示，默认为true
                aniShow:'slide-in-right',//页面显示动画，默认为”slide-in-right“；
                duration:2000//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
            },
            waiting:{
                autoShow:true,//自动显示等待框，默认为true
                title:'正在加载...'//等待对话框上显示的提示内容
                
            }
        })
    })
    
</script>
</body>
</html>